<template>
    <view class="page over-auto-y column">
        <hj-navbar :title="roomInfo.name" />
        <!-- 内容区 -->
        <view class="flex-auto w100 over-auto-y" v-if="!isInitLoad">
            <!-- 相册 -->
            <DetailsAlbum :list="roomInfo.imageLists" />
            <!-- 房间设施 -->
            <RoomFacility :info="roomInfo" />
            <!-- 政策服务 -->
            <PolicyService :info="roomInfo" />
            <!-- 费用明细 -->
            <ExpenseDetails :info="roomInfo.roomInfoPriceResp" />
        </view>
        <!-- 底部 -->
        <DetailsFooter
            v-if="!isInitLoad"
            :info="roomInfo.roomInfoPriceResp"
            :stockNum="roomInfo.roomTypeInfoDetailResp?.stockNum || 0"
            :roomId="roomId"
        />
        <!-- 初始化loading -->
        <hj-loading :show="isInitLoad" v-if="isInitLoad" />
    </view>
</template>

<script setup>
/**
 * @description 房型详情
 * @author yinzhi
 * @date 2025-05
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent, computed } from 'vue'
import { logger } from '@/utils/log.js'
import DetailsFooter from './components/DetailsFooter.vue'
import DetailsAlbum from './components/DetailsAlbum.vue'
import RoomFacility from './components/RoomFacility.vue'
import PolicyService from './components/PolicyService.vue'
import ExpenseDetails from './components/ExpenseDetails.vue'
import { getRoomDetailApi } from '@/libs/api/roomApi.js'
import { useStore } from 'vuex'
const store = useStore()
// 引入组件
defineComponent({
    components: {
        DetailsFooter,
        DetailsAlbum,
        RoomFacility,
        PolicyService,
        ExpenseDetails
    }
})
// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')
// 酒店信息
const hotelInfo = computed(() => store.state.platform.hotelInfo || '')
// 初始化加载
const isInitLoad = ref(true)
// 房型ID
const roomId = ref('')
// 初始化
onLoad(options => {
    if (options.roomId) {
        roomId.value = options.roomId
        getRoomDetails()
    }
})
// 房型数据
const roomInfo = ref({
    name: '房型详情',
    imageLists: [], //相册列表
    facilityService: {}, //设施服务
    hotelPolicy: {}, //酒店政策
    roomTypeInfoDetailResp: {}, //房型相关信息
    hotelRoomFacilityResp: {}, //房型设施
    roomInfoPriceResp: {} //房间价格明细
})

// 获取房型详情
const getRoomDetails = async () => {
    try {
        const data = await getRoomDetailApi({
            checkInDate: checkInInfo.value.startDate,
            checkOutDate: checkInInfo.value.endDate,
            hotelId: hotelInfo.value.id,
            roomId: roomId.value,
            roomNum: checkInInfo.value.roomAmount || 1
        })
        roomInfo.value = data
        isInitLoad.value = false
    } catch (error) {
        isInitLoad.value = false
        logger.error('[getRoomDetails] 获取房型详情失败: ', error)
    }
}
</script>

<style scoped lang="scss">
.page {
    background: $uni-bg-color-grey;
}
</style>
